import React from 'react';
import _ from 'lodash';
import {
	Chart,
	Geom,
	Tooltip,
	Coordinate,
	Legend,
	Axis,
	Interaction,
	G2,
	registerShape
} from "bizcharts";
import DataSet from "@antv/data-set";


function getTextAttrs(cfg) {
	return _.assign(
		{},
		cfg.style,
		{
			fontSize: cfg.data.size,
			text: cfg.data.text,
			textAlign: 'center',
			fontFamily: cfg.data.font,
			fill: cfg.color,
			textBaseline: 'Alphabetic'
		}
	);
}
registerShape("point", "cloud", {
	draw(cfg, container) {
		// console.log('cloud cfg', cfg);
		const attrs = getTextAttrs(cfg);
		const textShape = container.addShape("text", {
			attrs: _.assign(attrs, {
				x: cfg.x,
				y: cfg.y
			})
		});
		if (cfg.data.rotate) {
			G2.Util.rotate(textShape, cfg.data.rotate * Math.PI / 180);
		}
		return textShape;
	}
});
const data = [
	{
		"x": "新冠肺炎",
		"value": 424913810,
	}, {
		"x": "共餐",
		"value": 9155112,
	}, {
		"x": "临界病",
		"value": 8921313,
	}, {
		"x": "全民营养",
		"value": 100231313,
	}, {
		"x": "网红减肥法",
		"value": 20750500,
	}, {
		"x": "糖尿病",
		"value": 1964590,
	}, {
		"x": "高血压",
		"value": 1918360,
	}, {
		"x": "健康谣言",
		"value": 16245900,
		"category": "asia"
	}, {
		"x": "植物基",
		"value": 1468043,
		"category": "europe"
	}, {
		"x": "中医药",
		"value": 126790000,
		"category": "asia"
	}, {
		"x": "幽门螺旋杆菌",
		"value": 1235180,
	}, {
		"x": "体检",
		"value": 10434500,
	}, {
		"x": "睡眠",
		"value": 104037000,
	}, {
		"x": "健身",
		"value": 930130,
	}, {
		"x": "减脂",
		"value": 627000,
	}, {
		"x": "低卡饮食",
		"value": 428000,
	}, {
		"x": "医保",
		"value": 82243000,
	}, {
		"x": "5G医疗",
		"value": 8013540,
	}, {
		"x": "高血脂",
		"value": 280135,
	}, {
		"x": "冠心病",
		"value": 550130,
	}, {
		"x": "有氧",
		"value": 801354,
	}, {
		"x": "骑行",
		"value": 180130,
	}, {
		"x": "轻食",
		"value": 413530,
	}, {
		"x": "996",
		"value": 30135400,
	}, {
		"x": "体态",
		"value": 113540,
	}, {
		"x": "视力",
		"value": 90135400,
	}, {
		"x": "瑜伽",
		"value": 10013540,
	}, {
		"x": "按摩",
		"value": 7013540,
	}, {
		"x": "泡脚",
		"value": 6013140,
	}, {
		"x": "酸碱体脂",
		"value": 12313540,
	}, {
		"x": "增肌",
		"value": 9013540,
	}, {
		"x": "枸杞",
		"value": 10013540,
	}, {
		"x": "养生",
		"value": 11213540,
	}, {
		"x": "肥胖",
		"value": 23313540,
	}, {
		"x": "渐冻症",
		"value": 1013540,
	}, {
		"x": "阿尔兹海默症",
		"value": 30013540,
	}, {
		"x": "抗癌药",
		"value": 31231354,
	}, {
		"x": "光盘",
		"value": 100113540,
	}, {
		"x": "冬虫夏草",
		"value": 50013540,
	}, {
		"x": "脱发",
		"value": 23013540,
	}, {
		"x": "口罩",
		"value": 31313540,
	}, {
		"x": "雾霾",
		"value": 50013540,
	},


  
];

export default ():React.FC => {
  const dv = new DataSet.View().source(data);
		const range = dv.range('value');
		const min = range[0];
		const max = range[1];
		dv.transform({
			type: 'tag-cloud',
			fields: ['x', 'value'],
			size: [600, 500],
			font: 'Verdana',
			padding: 0,
			timeInterval: 5000, // max execute time
			rotate() {
				let random = ~~(Math.random() * 4) % 4;
				if (random === 2) {
					random = 0;
				}
				return random * 90; // 0, 90, 270
			},
			fontSize(d) {
				if (d.value) {
					return ((d.value - min) / (max - min)) * (40 - 12) + 12;
				}
				return 0;
			}
		});
		const scale = {
			x: {
				nice: false
			},
			y: {
				nice: false
			}
		};
    return (
			<Chart
				width={600}
				height={600}
				data={dv.rows}
				scale={scale}
				padding={0}
				autoFit={false}
				onPointClick={console.log}
			>
				<Tooltip showTitle={false} />
				<Coordinate reflect="y" />
				<Axis name='x' visible={false} />
				<Axis name='y' visible={false} />
				<Legend visible={false} />
				<Geom
					type='point'
					position="x*y"
					color="x"
					shape="cloud"
					tooltip="x*value"
				/>
				<Interaction type='element-active' />
			</Chart>
		);
}
